<template>
  <div class="changePassword">
    <div class="form">
      <div class="form-item">
        <CustomInput
          v-model="formItem.oldPassword"
          inputType="password"
          title="原密码"
          placeholder="原密码"
          :isInput="true" />
      </div>
      <div class="form-item">
        <CustomInput
          v-model="formItem.newPassword"
          inputType="password"
          title="新密码"
          placeholder="新密码"
          :isInput="true" />
      </div>
      <div class="form-item">
        <CustomInput
          v-model="formItem.__custom_password"
          inputType="password"
          title="确认密码"
          placeholder="确认密码"
          :isInput="true" />
      </div>
    </div>

    <div class="action">
      <button @tap="actionClick">修改密码</button>
    </div>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { mapState } from 'vuex'
import { ERR_OK } from 'api/config'
import { changePassword } from 'api/changePassword'
import { logout } from 'api/me'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    ...mapState([
      'isTenantLogin'
    ])
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      formItem: {}
    }
  },
  methods: {
    initData () {
      this.formItem = {
        oldPassword: '',
        newPassword: '',
        __custom_password: ''
      }
    },
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    actionClick () {
      if (!this.formItem.oldPassword) {
        this.$showToast({
          title: '请填写原密码',
          icon: 'none'
        })
        return
      }

      if (this.formItem.newPassword !== this.formItem.__custom_password) {
        this.$showToast({
          title: '新密码和确认密码不一致',
          icon: 'none'
        })
        return
      } else {
        if (this.formItem.newPassword.length < 8) {
          this.$showToast({
            title: '新密码长度不得低于8位',
            icon: 'none'
          })
          return
        }
      }

      this.changePassword()
    },
    async changePassword () {
      this.$showLoading('修改中')

      const obj = JSON.parse(JSON.stringify(this.formItem))

      this.deleteCustomKey(obj)

      const res = await changePassword(obj)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '修改成功',
          success: () => {
            logout(this.isTenantLogin)

            wx.reLaunch({
              url: '/pages/login/main'
            })
          }
        })
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~common/scss/color";

  .changePassword {
    width: 100%;
    height: 100%;
    position: relative;
    > .form {
      padding: 0 10px;
      > .form-item {
        border-bottom: 1px solid rgb(232, 232, 232);
      }
    }
    > .action {
      width: 90%;
      margin: 0 auto;
      margin-top: 30px;
      > button {
        background-color: $color-default;
        color: white;
      }
    }
  }
</style>
